<template>
  <footer class="footer-notice">
    <div class="links">
      <el-link :underline="false" href="#">关于腾讯</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">About Tencent</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">服务条款</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">用户服务协议</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">隐私政策</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">权利声明</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">广告服务</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">腾讯招聘</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">客服中心</el-link>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">网站地图</el-link>
    </div>
    
    <div class="copyright">
      <el-text class="text-item">Copyright © 1998 – {{ currentYear }} Tencent. All Rights Reserved.</el-text>
    </div>
    
    <div class="license">
      <el-text class="text-item">腾讯公司 版权所有</el-text>
      <el-divider direction="vertical" />
      <el-link :underline="false" href="#">营业执照</el-link>
      <el-divider direction="vertical" />
      <el-text class="text-item">网络文化经营许可证: 粤网文[2023]2682-2033号</el-text>
      <el-divider direction="vertical" />
      <el-text class="text-item">网络视听许可证0904073号</el-text>
      <el-divider direction="vertical" />
      <el-text class="text-item">客服电话: 4000616666</el-text>
      <el-divider direction="vertical" />
      <el-text class="text-item">违法与不良信息举报邮箱: tme_musicjubao@tencent.com</el-text>
    </div>
  </footer>
</template>

<script setup>
import { ref } from 'vue'
import { ElLink, ElDivider, ElText } from 'element-plus'

const currentYear = ref(new Date().getFullYear())
</script>

<style scoped>
.footer-notice {
  padding: 20px 0;
  text-align: center;
  background-color: var(--el-bg-color-page);
  color: var(--el-text-color-secondary);
  font-size: 12px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

.links {
  margin-bottom: 15px;
}

:deep(.el-link) {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

:deep(.el-link:hover) {
  color: var(--el-color-primary);
}

:deep(.el-divider--vertical) {
  margin: 0 8px;
  height: 12px;
}

.copyright {
  margin-bottom: 15px;
}

.license {
  line-height: 1.8;
}

.text-item {
  font-size: 12px;
}
</style>
